<template>
  <view class="app-layout">
    <app-header :title="tit" />
    <view class="app-main">
      <view class="form-container">
        <view class="attr-form">
          <scroll-view scroll-y="true" style="height: 100%">
            <u-form labelPosition="left" labelWidth="90px" :model="formData" ref="refFrom">
              <view class="page-product-form-info">
                <u-form-item label="属性名称" required>
                  <uni-easyinput placeholder="请输入" clearable v-model="formData.attributeName" :maxlength="30">
                    <template #right>
                      <text class="suffix-num">{{ (formData.attributeName || '').length }}/30</text>
                    </template>
                  </uni-easyinput>
                </u-form-item>
                <u-form-item label="商品属性值" required>
                  <uni-row :gutter="20">
                    <template v-for="(item,index) in formData.attributeValue" :key="index">
                      <uni-col :span="7">
                        <view class="att-label">
                          *
                          <text>属性值</text>
                        </view>
                        <view class="flex-row">
                          <uni-easyinput placeholder="请输入" clearable
                            v-model="formData.attributeValue[index]" :maxlength="30">
                            <template #right>
                              <text class="suffix-num">{{ (formData.attributeValue[index] || '').length }}/30</text>
                            </template>
                            </uni-easyinput>
                          <u-icon name="trash" @click="removeClick(index)"></u-icon>
                        </view>
                      </uni-col>
                    </template>

                    <uni-col :span="3">
                      <view class="specifications" @click="addClick"> +添加 </view>
                    </uni-col>
                  </uni-row>
                </u-form-item>
                <u-form-item label="分类状态" required>
                  <u-switch v-model="formData.status" size="20" :activeValue="1" :inactiveValue="0"
                    activeColor="#20D048"></u-switch>
                </u-form-item>
                <u-form-item label="属性备注">
                  <u-textarea v-model="formData.description" :placeholder="'请输入'" :maxlength="200" :rows="5"
                    :autosize="true" count></u-textarea>
                </u-form-item>
              </view>
            </u-form>
          </scroll-view>
        </view>
        <view class="submit_btncon">
          <view style="display: flex; margin: auto">
            <button class="submit_close" @click="close">取消</button>
            <button class="submit_btn" @click="submit">确定</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
  import {
    ref
  } from 'vue'
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    addAttributeDefinitions,
    updateAttributeDefinitions
  } from '@/requests/apis/products'
  let refFrom = ref(null)
  let tit = ref('新增商品属性')
  let formData = ref({
    status:1,
    attributeName: "",
    attributeValue: [""]
  })
  onLoad((e) => {
    console.log(e, '1111111')
    if (e.infoList) {
      tit.value = '编辑商品属性'
      let data = JSON.parse(decodeURIComponent(e.infoList))
      console.log(data, '11111')
      formData.value = data
      formData.value.attributeValue = data.attributeValue.map(item => item.value)
      // formData.value.definitionId = data.definitionId
      formData.value.attributeName = data.name
      // formData.value.status = data.status
      formData.value.description = data.description||''
    }
  })
  const addClick = () => {
    formData.value.attributeValue.push('')
  }
  const removeClick = (index) => {
    formData.value.attributeValue.splice(index, 1)
  }


  const submit = () => {
    console.log(formData.value.isActive)
    const valid = [{
      k: 'attributeName',
      err: '请输入属性名称',
    }]
    let err = ''
    for (let item of valid) {
      if (!formData.value[item.k] && formData.value[item.k] !== 0) {
        err = item.err
        break
      }
    }
    if (err) {
      uni.showToast({
        title: err,
        icon: 'none',
        duration: 2000,
      })
    } else {
      for (let i = 0; i < formData.value.attributeValue.length; i++) {
        const item = formData.value.attributeValue[i]
        // 验证名称
        if (!item?.trim()) {
          uni.showToast({
            title: `请填写属性值`,
            icon: 'none',
            duration: 2000,
          })
          return
        }
      }
      submitReq()
    }
  }
  const submitReq = async () => {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })

    let postData = JSON.parse(JSON.stringify(formData.value))
    const fn = formData.value.definitionId ? updateAttributeDefinitions : addAttributeDefinitions
    try {
      const res = await fn(postData)
      console.log(res, 'resres')
      if (res) {
        uni.showToast({
          title: res.Result,
          icon: 'success',
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      }
      uni.hideLoading()
    } catch (error) {
      console.log(error)
    }
  }
  const close = () => {
    uni.navigateBack()
  }
</script>
<style lang="scss" scoped>
  .form-container {
    width: 100%;
    background: #fff;
    margin: 10px 10px 0;
    display: flex;
    flex-direction: column;

    .attr-form {
      flex: 1;
      overflow: hidden;
      :deep(.u-form){
        padding: 48px 100px 0;
        box-sizing: border-box;
      }
      .suffix-num {
        font-weight: 400;
        font-size: 14px;
        color: rgba(51, 70, 129, 0.6);
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
  }

  .form-container {
    :deep(.uni-row) {
      width: 100%;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
    }

    :deep(.uni-col) {
      margin-bottom: 10px
    }

    :deep(.u-icon) {
      margin-left: 10px;
    }

    .specifications {
      background: #0f90fd;
      border-radius: 8px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      padding: 7px 0;
      box-sizing: border-box;
      white-space: nowrap;
      text-align: center;
    }

    .att-label {
      color: #f56c6c;
      font-size: 20px;
      margin-bottom: 5px;
      display: flex;

      text {
        color: #333;
        font-size: 14px;
      }
    }
  }
</style>
